<script setup lang="ts" name="SelectAreaPackageType">
import { onMounted, ref } from "vue";
import { type ConfigProviderThemeVars, showFailToast } from "vant";
import { GetPackageTypeList } from "@/api/tally";
import type { SelectorCol } from "@/utils/interface";


const themeVars: ConfigProviderThemeVars = {
  searchContentBackground: "#ffffff",
  searchPadding: "0px",
  buttonSmallHeight: "30px",
  buttonSmallPadding: "12px",
  buttonDefaultHeight: "35px",
  buttonIconSize: "10px",
  searchBackground: "transparent",
  pickerBackground: "#efefef"
};

onMounted(() => {
  getPackageTypeList();
});

const res = ref();
const input = defineProps(["packageType"]);
const emit = defineEmits(["isOpen", "selectedPackageType"]);
const emptyCol = [{ text: "暂无数据", value: "0" }];
const isSearching = ref(false);
const keyword = ref("");
const packageTypeList = ref(emptyCol);
const originPackageTypeList = ref([]);

function getPackageTypeList() {
  const params = {
    keyword: keyword.value
  };
  isSearching.value = true;
  GetPackageTypeList(params)
    .then((result: any) => {
      packageTypeList.value = emptyCol;
      if (result.success && result.data.length > 0) {
        let colData: SelectorCol[] = [];
        originPackageTypeList.value = [];
        result.data.forEach((i: any) => {
          originPackageTypeList.value = result.data;
          const item: SelectorCol = {
            text: i.packInfo,
            value: i.customsPackageCode
          };
          colData.push(item);
        });
        packageTypeList.value = colData;
      }
      if (input.packageType.value !== "") {
        res.value = [input.packageType.value];
      }
      isSearching.value = false;
    })
    .catch(() => {
      isSearching.value = false;
    });
}

function returnRes() {
  if (res.value["0"] === "0") {
    showFailToast("请选择有效包装");
    return;
  }
  const data = originPackageTypeList.value.filter(
    i => i["customsPackageCode"] === res.value["0"]
  )[0];
  emit("selectedPackageType", data);
  showPop(false);
}

function showPop(show: boolean) {
  emit("isOpen", show);
}
</script>

<template>
  <div class="flex-col h-[auto] p-[20px] w-full" style="background: #f6f6f6">
    <van-config-provider :theme-vars="themeVars">
      <div class="flex h-[30px] justify-between">
        <div
          class="flex justify-center items-center h-full text-center text-base font-bold"
        >
          选择包装
        </div>
        <div
          class="flex h-full justify-center items-center text-center text-base"
        >
          <div class="text-blue-500 font-bold" @click="returnRes">确定</div>
        </div>
      </div>
      <div class="flex flex-col w-[100%] flex-1 mt-[10px]">
        <div class="flex w-[100%] h-[40px]">
          <van-search
            class="flex w-[100%]"
            v-model="keyword"
            shape="round"
            placeholder="请输入搜索关键词"
            show-action
            :clearable="false"
          >
            <template #action>
              <div class="flex w-full h-full items-center">
                <van-button
                  class="flex"
                  v-if="isSearching"
                  loading
                  type="success"
                  size="small"
                  >搜索</van-button
                >
                <van-button
                  class="flex"
                  v-if="!isSearching"
                  type="success"
                  @click="getPackageTypeList"
                  size="small"
                  >搜索</van-button
                >
              </div>
            </template>
          </van-search>
        </div>
        <div class="mt-[10px]">
          <van-picker
            :show-toolbar="false"
            :columns="packageTypeList"
            v-model="res"
          />
        </div>
      </div>
    </van-config-provider>
  </div>
</template>

<style scoped></style>
